<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Title -->
  <title>Gift Oasis | Gift Shop</title>

  <!-- Favicon -->


  <!-- Font-Awesome (CSS) -->
  <link rel="stylesheet" href="static/css/all.min.css">

  <!-- Custom Stylesheets -->
  <link rel="stylesheet" href="static/css/main.css">
  <link rel="stylesheet" href="static/css/responsive.css">

</head>

<body>

  <!-- ==================== Scroll-Top Area (Start) ==================== -->
  <a href="#" class="scroll-top">
    <i class="fas fa-long-arrow-alt-up"></i>
  </a>
  <!-- ==================== Scroll-Top Area (End) ==================== -->

  <header class="header">
    <div class="header-2">

      <div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>

      <!-- == Logo == -->
      <a class="logo" href="index.html">
        <img src="static/picture/Logo.png" alt="logo">
        <div class="logo-name">
          <h3>礼物商城</h3>
        </div>
      </a>

      <div class="container">

        <!-- == Navbar == -->
        <nav class="navbar">

          <a class="nav-btn" href="index.html">首页</a>

          <div class="dropdown-menu">
            <button class="nav-btn"><a class="nav-btn" href="About.html">关于我们</a> </button>
            <div class="dropdown-content">

            </div>
          </div>

          <div class="dropdown-menu">
            <button class="nav-btn">登陆注册</a> <i class="fas fa-angle-down"></i> </button>
            <div class="dropdown-content">


              <a href="Login.html">login</a>
              <a href="Register.html">register</a>

            </div>
          </div>

          <div class="dropdown-menu">
            <button class="nav-btn"><a class="nav-btn" href="Categories.html">商品列表</a><i class="fas fa-angle-down"></i>
            </button>
            <div class="dropdown-content">
              <a href="Product-Single.html">商品详情</a>
              <a href="Cart.html">购物车</a>
              <a href="Order-Single.html">订单详情</a>
            </div>
          </div>

          <div class="dropdown-menu">
            <button class="nav-btn"><a class="nav-btn" href="Blog-Grid.html">新闻列表</a></button>
            <div class="dropdown-content">



            </div>
          </div>

          <a class="nav-btn" href="Contact.html">联系我们</a>

        </nav>

        <!-- == Icon Container == -->
        <div class="icon-container">
          <div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
          <a href="Login.html" id="login" class="icon fas fa-user"></a>
          <a href="Cart.html" id="cart"> <!-- Cart Page Link -->
            <i class="icon fas fa-shopping-cart"></i>
            <span class="badge">5</span> <!-- Cart Items Count (Badge) -->
          </a>
        </div>

        <!-- == Search Container == -->
        <form class="search-container">
          <input type="search" id="search-bar" placeholder="search here" required=""> <!-- Search Input -->
          <button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
        </form>

      </div>

    </div>
    <!-- ===== Header-2 Area (End) ===== -->

    <!-- ===== Mobile Menu Area (Start) ===== -->
    <div class="mobile-menu">

      <nav class="mobile-navbar">

        <div class="nav-link">
          <div class="main-nav-link"> <a class="nav-btn" href="index.html">首页</a> </div>
        </div>

        <div class="nav-link">
          <div class="main-nav-link">
            <div class="nav-btn"><a href="About.html">关于我们</a></div></i>
          </div>
          <div class="sub-nav-link">

          </div>
        </div>

        <div class="nav-link">
          <div class="main-nav-link">
            <div class="nav-btn">登录注册</div> <i class="fas fa-plus"></i>
          </div>
          <div class="sub-nav-link">
            <a href="Login.html">login</a>
            <a href="Register.html">register</a>
          </div>
        </div>

        <div class="nav-link">
          <div class="main-nav-link">
            <div class="nav-btn"><a href="Categories.html">商品列表</a></div> <i class="fas fa-plus"></i>
          </div>
          <div class="sub-nav-link">
            <a href="Product-Single.html">商品详情</a>
            <a href="Cart.html">购物车</a>
            <a href="Order-Single.html">订单详情</a>
          </div>
        </div>

        <div class="nav-link">
          <div class="main-nav-link">
            <div class="nav-btn"><a href="Blog-Grid.html">新闻列表</a></div>
          </div>
        </div>

        <div class="nav-link">
          <div class="main-nav-link"> <a class="nav-btn" href="Contact.html">关于我们</a> </div>
        </div>

      </nav>

    </div>
    <!-- ===== Mobile Menu Area (End) ===== -->

  </header>


  <!-- ==================== Page-Title (Start) ==================== -->
  <div class="page-title">

    <div class="title">
      <h2>Shop Grid</h2>
    </div>

    <div class="link">
      <a href="index.html">Home</a>
      <i class="fa-solid fa-arrow-right-long"></i>
      <span class="page">Shop Grid</span>
    </div>

  </div>
  <!-- ==================== Page-Title (End) ==================== -->



  <!-- ==================== Shop-Grid Area (Start) ==================== -->
  <section class="shop">

    <!-- ========== Shop Sidebar Area (Start) ========== -->
    <div class="sidebar">

      <!-- ===== Category Area (Start) ===== -->
      <div class="category sidebar-item">

        <!-- Sidebar Heading: Categories -->
        <div class="sidebar-heading">
          <h2>商品类别</h2>
        </div>

        <!-- Shop Categories -->
        <div class="box-container">
          <a href="#" class="item"> <span><i class="fas fa-caret-right"></i>所有产品</span>
            <p>(59)</p>
          </a>
          <a href="#" class="item"> <span><i class="fas fa-caret-right"></i>家居装饰</span>
            <p>(08)</p>
          </a>
          <a href="#" class="item"> <span><i class="fas fa-caret-right"></i>珠宝首饰</span>
            <p>(06)</p>
          </a>
          <a href="#" class="item"> <span><i class="fas fa-caret-right"></i>文具用品</span>
            <p>(04)</p>
          </a>
          <a href="#" class="item"> <span><i class="fas fa-caret-right"></i>玩具和游戏 </span>
            <p>(06)</p>
          </a>
          <a href="#" class="item"> <span><i class="fas fa-caret-right"></i>时尚首饰</span>
            <p>(07)</p>
          </a>
          <a href="#" class="item"> <span><i class="fas fa-caret-right"></i>食品和饮料</span>
            <p>(09)</p>
          </a>
          <a href="#" class="item"> <span><i class="fas fa-caret-right"></i>护理产品</span>
            <p>(09)</p>
          </a>
          <a href="#" class="item"> <span><i class="fas fa-caret-right"></i>手工制品</span>
            <p>(10)</p>
          </a>
        </div>

      </div>
      <!-- ===== Category Area (End) ===== -->

      <!-- ===== Filter Products (Start) ===== -->
      <div class="filter sidebar-item">

        <!-- Sidebar Heading: Filter Products -->
        <div class="sidebar-heading">
          <h2>价格筛选</h2>
        </div>

        <div class="box-container">
          <!-- Slider -->
          <div class="slider">
            <div class="progress"></div>
          </div>
          <!-- Range Input -->
          <div class="range-input">
            <input type="range" class="range-min" min="0" max="1000" value="250" step="10">
            <input type="range" class="range-max" min="0" max="1000" value="750" step="10">
          </div>
          <!-- Price Wrap -->
          <div class="price-wrap">
            <!-- Price Input -->
            <div class="price-input">
              <!-- Minimum Price Field -->
              <div class="field">
                <span>$</span>
                <input type="number" class="input-min" value="250">
              </div>
              <!-- Separator -->
              <div class="separator">-</div>
              <!-- Maximum Price Field -->
              <div class="field">
                <span>$</span>
                <input type="number" class="input-max" value="750">
              </div>
            </div>
            <!-- Filter Button -->
            <span class="btn">查找</span>
          </div>
        </div>
      </div>
      <!-- ===== Filter Products (End) ===== -->

      <!-- ===== Popular Products Area (Start) ===== -->
      <div class="popular-products sidebar-item">

        <!-- Sidebar Heading: Popular Products -->
        <div class="sidebar-heading">
          <h2>相关推荐</h2>
        </div>

        <!-- Popular Products -->
        <div class="box-container">

          <!-- Popular Product 1 -->
          <div class="post-item">
            <img src="static/picture/Product-1.jpg" alt="Popular-Product-Image"> <!-- Product Image -->
            <div class="content">
              <a href="Product-Single.html">handbag</a> <!-- Product Title -->
              <div class="price">
                <p>$40.00 <span>$50.00</span></p> <!-- Product Price -->
              </div>
            </div>
          </div>

          <!-- Popular Product 2 -->
          <div class="post-item">
            <img src="static/picture/Product-4.jpg" alt="Popular-Product-Image"> <!-- Product Image -->
            <div class="content">
              <a href="Product-Single.html">Picture frames</a> <!-- Product Title -->
              <div class="price">
                <p>$40.00 <span>$50.00</span></p> <!-- Product Price -->
              </div>
            </div>
          </div>

          <!-- Popular Product 3 -->
          <div class="post-item">
            <img src="static/picture/Product-9.jpg" alt="Popular-Product-Image"> <!-- Product Image -->
            <div class="content">
              <a href="Product-Single.html">lotion</a> <!-- Product Title -->
              <div class="price">
                <p>$40.00 <span>$50.00</span></p> <!-- Product Price -->
              </div>
            </div>
          </div>

        </div>

      </div>
      <!-- ===== Popular Products Area (End) ===== -->

    </div>
    <!-- ========== Shop Sidebar Area (End) ========== -->

    <!-- ========== Shop Container (Start) ========== -->
    <div class="shop-container">

      <!-- ===== Shop Header (Start) ===== -->

      <div class="product-container grid">

        <!-- Product-1 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-1.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i
                  class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
            <a href="Product-Single.html">
              <h3>handbag</h3>
            </a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>

        <!-- Product-2 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-2.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i
                  class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
            <a href="Product-Single.html">
              <h3>rings</h3>
            </a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>

        <!-- Product-3 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-3.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i
                  class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
            <a href="Product-Single.html">
              <h3>Candles</h3>
            </a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>

        <!-- Product-4 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-4.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i
                  class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
            <a href="Product-Single.html">
              <h3>Picture frames</h3>
            </a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>

        <!-- Product-5 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-5.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i
                  class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
            <a href="Product-Single.html">
              <h3>necklace</h3>
            </a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>

        <!-- Product-6 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-6.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i
                  class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
            <a href="Product-Single.html">
              <h3>greeting card</h3>
            </a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>

        <!-- Product-7 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-7.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i
                  class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
            <a href="Product-Single.html">
              <h3>notebooks</h3>
            </a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>

        <!-- Product-8 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-8.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i
                  class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
            <a href="Product-Single.html">
              <h3>Jigsaw puzzle</h3>
            </a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>

        <!-- Product-9 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-9.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i
                  class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
            <a href="Product-Single.html">
              <h3>lotion</h3>
            </a> <!-- Product Title -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>

      </div>
      <!-- ===== Products (Ends) ===== -->

      <!-- ===== Pagination (Start) ===== -->
      <div class="pages-no">
        <div class="container">
          <!-- Previous Page Button -->
          <div class="item">
            <i class="fas fa-arrow-left"></i>
          </div>
          <!-- Page Numbers -->
          <div class="numbers">
            <div class="item active">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
          <!-- Next Page Button -->
          <div class="item">
            <i class="fas fa-arrow-right"></i>
          </div>
        </div>
      </div>
      <!-- ===== Pagination (End) ===== -->

    </div>
    <!-- ========== Shop Container (End) ========== -->

  </section>
  <!-- ==================== Shop-Grid Area (End) ==================== -->



  <!-- ==================== Footer Area (Start) ==================== -->
  <footer class="footer">

    <div class="box-container">

      <!-- == Gift Shop Description & Social Account Links == -->
      <div class="footer-item">

        <!-- Logo -->
        <a class="logo" href="">
          <img src="static/picture/Logo.png" alt="logo">
          <div class="logo-name">
            <h3>礼物商城</h3>
          </div>
        </a>
        <!-- Description -->
        <p>在我们的礼品店探索周到和独特的礼物。无论在什么场合，都要为你爱的人挑选一份完美的礼物。</p>
        <!-- Social Account Links -->
        <div class="social">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>

      </div>

      <!-- == Useful Links == -->
      <div class="footer-item">
        <h2>useful links</h2>
        <div class="info links pages">
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="index.html">首页</a></p>
            <p><i class="fas fa-square-full"></i><a href="About.html">关于我们</a></p>
            <p><i class="fas fa-square-full"></i><a href="Login.html">登录</a></p>
            <p><i class="fas fa-square-full"></i><a href="Register.html">注册</a></p>
          </div>
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="Categories.html">商品列表</a></p>
            <p><i class="fas fa-square-full"></i><a href="Product-Single.html">商品详情</a></p>
            <p><i class="fas fa-square-full"></i><a href="Cart.html">购物车</a></p>
            <p><i class="fas fa-square-full"></i><a href="Contact.html">联系我们</a></p>
          </div>
        </div>
      </div>

      <!-- == Product Categories == -->


      <!-- == Contact Information == -->
      <div class='footer-item'>
        <h2>contact info</h2>
        <div class="info connect">
          <p><i class="fas fa-phone"></i><span>+111-222-333</span></p>
          <p><i class="fas fa-phone"></i><span>+123-456-789</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">abc@gmail.com</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">xyz@gmail.com</span></p>
          <p><i class="fas fa-map"></i><span>karachi, pakistan</span></p>
        </div>
      </div>

    </div>

  </footer>
  <!-- ==================== Footer Area (End) ==================== -->



  <!-- Jquery -->
  <script src="static/js/jquery.min.js"></script>

  <!-- Custom Script Files -->
  <script src="static/js/script.js"></script> <!-- Custom JavaScript file with additional website functionality. -->
  <script src="static/js/nav-link-toggler.js"></script>
  <!-- Manages navigation link toggling (e.g., hamburger menu) for mobile devices -->
  <script src="static/js/Price-Filter.js"></script> <!-- Handles the price filtering functionality -->

</body>

</html>